
<template>
  <div class="m_right">
    <p></p>
    <div class="mem_tit">资讯中心</div>
    <div v-if="type == 1" style='float:right;padding-right:2rem'>
      <el-button type="primary" plain size="mini" @click="addNewsShow = true">新增资讯</el-button>
      <!-- 新增-对话框 -->
      <el-dialog title="新增资讯" :visible.sync="addNewsShow" >
        <el-form :model="addForm">
          <el-form-item label="资讯标题" :label-width="formLabelWidth">
            <el-input v-model="addForm.title"></el-input>
          </el-form-item>
          <el-form-item label="资讯内容" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="addForm.content"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addNewsShow = false">取 消</el-button>
          <el-button type="primary" @click="addNews"
            >新 增</el-button
          >
        </div>
      </el-dialog>
    </div>
    
    <!-- 查询条件 -->
    <div style="margin: 20px 100px 20px;">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="标题">
          <el-input v-model="searchForm.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="searchForm.createTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    
    <el-table
      v-loading="loading"
      element-loading-spinner="el-icon-loading"
      :data="newsList"      style="width: 90%"
    >
      <el-table-column label="文章标题" header-align="center" align="center">
        <template slot-scope="scope">
          <router-link
            :to="{name:'NewsDetail', params:{title: scope.row.title, content: scope.row.content}}"
           ><span v-html="scope.row.title"></span></router-link
          >
        </template>
      </el-table-column>
      <el-table-column label="创建时间" header-align="center" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="type == 1" label="操作" header-align="center" align="center">
        <template slot-scope="scope"> <!-- 这里直接在修改按钮绑定原生bom点击事件，展示modifyDialog同时展示传入id，直接在data中的newsList数组中查询到该资讯，免去服务端查询-->
          <el-button type="info" size="mini" @click.native="enterModifyView(scope.row.id)">修改</el-button>
          <el-button type="danger" size="mini" @click="deleteNews(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改-对话框 -->
    <el-dialog title="修改资讯" :visible.sync="modifyNewsShow" >
      <el-form :model="modifyForm">
        <el-form-item label="资讯标题" :label-width="formLabelWidth">
          <el-input v-model="modifyForm.title"></el-input>
        </el-form-item>
        <el-form-item label="资讯内容" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="modifyForm.content"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modifyNewsShow = false">取 消</el-button>
        <el-button type="primary" @click="modifyNews()">修 改</el-button>
      </div>
    </el-dialog>
    <br />
    <!-- 分页 -->
    <div class="page">
      <el-pagination
        prev-text="上一页"
        next-text="下一页"
        background
        @current-change="handleCurrentChange"
        :page-size="pageInfo.pageSize"
        :current-page="pageInfo.pageNum"
        layout="prev, pager, next, jumper"
        :total="pageInfo.totalCount"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>import Vue from "vue";
import {Pagination, Table, TableColumn, Loading, Dialog, Form, FormItem, Input, DatePicker, Button, MessageBox, Message} from "element-ui";
Vue.use(Pagination);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Dialog)
Vue.use(Form)
Vue.use(Input)
Vue.use(FormItem)
Vue.use(DatePicker)
Vue.use(Button)
Vue.use(Loading.directive);

Vue.prototype.$messageBox = MessageBox;
Vue.prototype.$message = Message;

export default {
  data() {
    return {
      pageInfo: {},
      newsList: [],
      pageNum: 1,
      pageSize: 10,
      loading: false, // 新增 loading 状态
      type: window.sessionStorage.getItem("type"),
      searchForm: {
        title: "",
        createTime: ""
      },
      //新增资讯表单
      addForm: {},
      addNewsShow: false,
      modifyForm: {},
      modifyNewsShow: false,
      formLabelWidth: "20%",

    };
  },
  methods: {
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getNewsList(this.pageNum, this.pageSize);
    },
    getNewsList(pageNum, pageSize) {
      this.loading = true; // 开始加载时显示 loading
      let params = {
        pageNum: pageNum,
        pageSize: pageSize
      };
      
      // 添加搜索条件
      if (this.searchForm.title) {
        params.title = this.searchForm.title;
      }
      if (this.searchForm.createTime) {
        params.createTime = this.searchForm.createTime;
      }
      
      Vue.prototype
        .$axios({
          url: "/api/news/pageinfo",
          method: "POST",
          data: params,
        })
        .then((rs) => {
          this.newsList = rs.data.pageinfo.list;
          this.pageInfo = rs.data.pageinfo;
          this.pageNum = this.pageInfo.pageNum;
        })
        .finally(() => {
          this.loading = false; // 加载完成后隐藏 loading
        });
    },
    skipToNewsDetail(title, content) {
      this.$router.push({
        name: "NewsDetail",
        params: {
          title,
          content,
        },
      });
    },
    enterModifyView(id) {
    //展示修改表单对话框
    this.modifyNewsShow = true;
    let news = null;
    this.newsList.forEach(i => {
      if(i.id == id) news = i;
    })
    this.modifyForm = news;
    },
    addNews() {
      this.$axios({
        url: '/api/news/addnews',
        method: 'post',
        data: this.addForm
      }).then(rs => {
        this.addForm = {} //每次新增保证为空数据
        if(rs.data.code == 5200) {
          this.$message({
            type: 'success',
            message: '新增成功!'
          })
          this.addNewsShow = false;
          this.getNewsList(this.pageNum, this.pageSize);
        }else {
          this.$message({
              type: 'warn',
              message: '新增失败!'
          })
        }
      })
    },
    modifyNews() { //先修改modifyForm，在修改后端
      this.$axios({
        url: '/api/news/updatenews',
        method: 'post',
        data: this.modifyForm,
      }).then(rs => {
        if(rs.data.code == 5200) {
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
              this.modifyNewsShow = false;
              this.getNewsList(this.pageNum, this.pageSize);
            }else {
              this.$message({
                type: 'danger',
                message: '修改失败!'
              });
            }
      })
    },
    deleteNews(id) {
      this.$messageBox.confirm('此操作会将该资讯移入回收箱, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios({
            url: '/api/news/delete',
            method: 'post',
            data: {id: id}
          }).then(rs => {
            if(rs.data.code == 5200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getNewsList(this.pageNum, this.pageSize);
            }else {
              this.$message({
                type: 'danger',
                message: '删除失败!'
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    // 查询功能
    onSearch() {
      this.pageNum = 1;
      this.getNewsList(this.pageNum, this.pageSize);
    },
    // 重置查询条件
    resetSearch() {
      this.searchForm = {
        title: "",
        createTime: ""
      };
      this.pageNum = 1;
      this.getNewsList(this.pageNum, this.pageSize);
    }
  },
  created() {
    this.getNewsList(this.pageNum, this.pageSize);
  },
  activated() {
    if (!this.newsList.length) {
      this.getNewsList(this.pageNum, this.pageSize);
    }
  },
  
};
</script>
    
<style>.page {
  text-align: center;
}
</style>